iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
2

今天開發的 FormAddPost 主要功能為 新增/修改 一篇文章的表單。

會用到之前寫的元件:

  • TheMarkdown
  • vue-codemirror
  • PostPreview

以及 vuetify 的元件:

  • v-switch
  • v-text-field
  • v-combobox
  • v-chip

至於表單驗證的部分,會選用到上一篇介紹的 simple-vue-validator。

使用 plop 新建元件 FormAddPost

npm run plop
# 輸入 FormAddPost

截圖:

020-006

這樣就輕鬆建立好一個新的元件了。

開始開發 FormAddPost 元件

因為程式碼比較多以下會拆成幾個部分逐一解釋

從元件名稱可以看出這個是一個表單,
主要結構有 5 個輸入、 2 個預覽:

輸入:

  • v-switch (是否顯示本篇文章)
  • v-text-field (本篇文章標題)
  • v-combobox (本篇文章所需的 tags)
  • codemirror (輸入本文章預覽的內容)
  • codemirror (輸入本文章的內容)

預覽:

  • ThePreviewText (預覽本文章預覽的內容)
  • TheMarkdown (預覽本文章的內容)

v-switch (是否顯示本篇文章)

開關,提供作者暫時先關閉未完成的文章。

020-001

不顯示文章:
020-007

顯示文章:
020-008

v-text-field (本篇文章標題)

輸入文章標題,並透過 props: error, error-messages 驗證表單。

020-002

驗證邏輯:
020-026

初始狀態:
020-009

驗證通過:
020-010

驗證未通過:
020-017

v-combobox (本篇文章所需的 tags)

020-003

驗證邏輯:
020-023

初始狀態:
020-011

驗證通過:
020-012

驗證未通過:
020-018

codemirror (輸入本文章預覽的內容)

利用 vue-codemirror 提供的元件,輸入 markdown,
並用 PostPreview 元件,預覽文章。

020-004

驗證邏輯:
020-024

驗證通過:
020-013

驗證未通過:
020-020

預覽:
020-014

codemirror (輸入本文章的內容)

020-005

驗證邏輯:
020-025

驗證通過:
020-015

驗證未通過:
020-020

預覽:

020-016

程式碼放在以下 branch:

020-FormAddPost

指令:

git clone -b 020-FormAddPost --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run storybook

上一篇
#19: 為何我選擇 simple-vue-validator?
下一篇
#21 套件安裝及設定: Firebase 基礎設定
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言